import 'package:flutter/material.dart';

class GridViewDemo extends StatefulWidget {
  const GridViewDemo({super.key});

  @override
  State<GridViewDemo> createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  List<Map<String, dynamic>> dataList = List.generate(100, (it) => {"it": it});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 0.5,
        ),
        itemCount: 100,
        itemBuilder: (context, it) {
          Map<String, dynamic> data = dataList[it];
          return Column(
            children: [
              Container(
                padding: const EdgeInsets.all(10),
                color: (data['isFocus'] ?? false)
                    ? Colors.blueAccent
                    : Colors.redAccent,
                child: InkWell(
                  onTap: () {
                    debugPrint("GestureDetector onTap $it");
                  },
                  onFocusChange: (value) {
                    data['isFocus'] = value;
                    setState(() {});
                  },
                  child: Image.asset("assets/images/1.png"),
                ),
              ),
              TextButton(
                onPressed: () {
                  debugPrint("TextButton onPressed $it");
                },
                child: Text("button $it"),
              ),
              ElevatedButton(
                  onPressed: () => debugPrint("it"), child: Text("click$it")),
            ],
          );
        });
  }
}
